<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>音乐上传测试</title>
    <link rel="stylesheet" href="res/layui/css/layui.css">
</head>
<body>
    <div class="layui-container" style="padding: 50px;">
        <h2>音乐上传测试</h2>
        
        <div class="layui-upload-drag" id="musicUpload" style="margin-top: 30px;">
            <i class="layui-icon layui-icon-upload"></i>
            <div>点击上传音频文件，或将文件拖拽到此处</div>
            <div class="layui-hide" id="uploadDemoView">
                <hr>
                <img src="" alt="上传成功" style="max-width: 100%;">
            </div>
        </div>
        
        <div style="margin-top: 20px;">
            <button class="layui-btn" id="testUpload">测试上传接口</button>
        </div>
        
        <div id="result" style="margin-top: 20px;"></div>
    </div>

    <script src="res/layui/layui.js"></script>
    <script>
        const API_BASE = 'http://localhost:8080';
        
        layui.use(['upload', 'layer'], function(){
            var upload = layui.upload;
            var layer = layui.layer;
            
            //执行实例
            upload.render({
                elem: '#musicUpload', //绑定元素
                url: API_BASE + '/admin/music/upload', //上传接口
                accept: 'audio',
                exts: 'mp3|wav|flac|aac|ogg|m4a',
                done: function(res){
                    //上传完毕回调
                    if(res.success){
                        layer.msg('上传成功');
                        document.getElementById('result').innerHTML = '<p>上传成功，URL: ' + res.data + '</p>';
                    } else {
                        layer.msg('上传失败: ' + res.message);
                    }
                },
                error: function(){
                    //请求异常回调
                    layer.msg('上传异常');
                }
            });
            
            // 测试按钮
            document.getElementById('testUpload').addEventListener('click', function(){
                fetch(API_BASE + '/admin/music/upload', {
                    method: 'POST',
                    body: new FormData() // 空的表单数据
                })
                .then(res => res.json())
                .then(result => {
                    document.getElementById('result').innerHTML = '<p>测试结果: ' + JSON.stringify(result) + '</p>';
                })
                .catch(err => {
                    document.getElementById('result').innerHTML = '<p>测试错误: ' + err + '</p>';
                });
            });
        });
    </script>
</body>
</html>